<template>
<!--客户注册界面-->
  <div>
    <div class="client-registered-box">
      <div style="display: flex;padding-top: 10px;padding-left: 45px;width: 100%" >
        <a href="#"  style="display: flex">
          <i class="icon-kehuzu" style="margin-top: 5px"></i>
          <h3>&nbsp;客户信息注册</h3>
        </a>
      </div>
      <div class="client-registered-box-detail">
        <el-form :model="client" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="客户名称" prop="clientName">
            <el-input  style="width: 300px;" clearable maxlength="10" v-model="client.clientName"></el-input>
          </el-form-item>
          <el-form-item label="客户组"  required>
            <el-select  style="width: 300px;" v-model="client.groupId" placeholder="请选择客户组"><el-option
              v-for="item in groupList"
              :key="item.groupClientId"
              :label="item.groupClientName"
              :value="item.groupClientId">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性别" required>
            <el-radio v-model="client.sex" label="男">男</el-radio>
            <el-radio v-model="client.sex" label="女">女</el-radio>
          </el-form-item>
            <el-form-item label="客户电话" prop="phone">
              <el-input  style="width: 300px;" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0})?).*$/g, '$1')" clearable maxlength="11" v-model="client.phone"></el-input>
            </el-form-item>

              <el-form-item label="客户qq"  prop="qq">
                <el-input  style="width: 300px;" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0})?).*$/g, '$1')" clearable maxlength="15" v-model="client.qq"></el-input>
              </el-form-item>
          <el-form-item label="客户地址" >
            <el-input  style="width: 300px;" clearable maxlength="20" v-model="client.address"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱"  prop="email">
            <el-input style="width: 300px;" clearable maxlength="30" v-model="client.email"></el-input>
          </el-form-item>
          <el-form-item label="客户备注" >
            <el-input clearable type="textarea"  :rows="3"  maxlength="40"
                      style="width: 300px"
                      show-word-limit
                      v-model="client.remark"></el-input>
          </el-form-item>


          <el-form-item>
            <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')"><span style="font-size: 16px;font-weight: bold">确认注册</span></el-button>
            <el-button :loading="loading" type="danger" @click="resetForm('ruleForm')"><span style="color: white;font-weight: bold;font-size: 16px">重新填写</span></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";

export default {
  name: "ClientRegistered",
  data(){
    return{
      loading:false,
      groupList:[],
      client:{
        clientName:null,
        groupId:null,
        sex:'男',
        phone:null,
        qq:null,
        email:null,
        address:null,
        remark:null,
      },
      rules: {
        clientName: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' },
        ],
        phone: [
          { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' }
        ],
        qq: [
          { min: 6, max: 14, message: '长度在6到14个字符', trigger: 'blur' }
        ],
        email: [
          {  max: 30, message: '长度不超过30', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.getGroupList();
  },
  methods:{
    submitForm(formName) {
      this.loading=true
      this.$refs[formName].validate((valid) => {
        if (valid) {
         post('/api/v1/client/registered',this.client).then(resp=>{
             if (resp.data.code===1){
               this.$message({
                 message: resp.data.msg,
                 type: 'success'
               });
               this.loading=false
               this.$router.push({name:'ClientManage'})
             }else {
               this.$message.error(resp.data.msg);
               this.loading=false
             }
         }).catch(resp=>{
           this.$message.error("出大事了，快找开发找bug");
           this.loading=false
           this.resetForm();
         })
        } else {
          this.loading=false
          return false;
        }
      });
    },
    getGroupList(){
      get('/api/v1/groupClient/showAll').then(resp=>{
        this.groupList=resp.data
        this.client.groupId=1
      })
    },
    resetForm(formName) {
       this.client.clientName=null
       this.client.groupId=null
       this.client.sex='男'
       this.client.phone=null
       this.client.qq=null
       this.client.email=null
       this.client.remark=null
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.client-registered-box-detail{
  /*padding-right: 30px;*/
  margin-left: 24px;
  background-color: #f2f2f2;
  height: 590px;
  width: 1200px;

  border-radius: 20px;
  padding-top: 20px;
}
.client-registered-box{

  height: 660px;
  margin-top: 10px;
  margin-left: 10px;
  width: 1245px;
  /*position: relative;*/
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
